External Style Sheets

An external style sheet is a separate document that contains only CSS rules. It has .css extension. External style sheets are used to apply uniform style to many Web pages. For example. Let’s assume that you are creating a website that contains more than one Web page and want to give the same look and feel to all the HTML elements. In such as situation, you can first create all the required CSS rules in an external style sheet and then link this sheet to all the Web pages of the Website

You can use an external style sheet to apply inform styles to all the Web pages that use it. You can link your Web page to an external style sheet by setting the href attribute of the <link> element to the name of the style sheet. The <link> element is added inside the <head> element of the HTML document.

In this section, you learn how to create an external style sheet and how to link that style sheet with an HTML Web page.

Creating an External Style Sheet

To create an external style sheet, you need to first create your styles in a blank text editor document, such as Notepad, and save it with the .css extension. Let’s perform the following steps to create an external style sheet:

Open a Notepad document or add the code given below:


body {background-color:#f0f8ff; font-family:arial}
a:link {color:#808080}
a:visited{color:#ffff00}
a:hover {color:#00ff00}
a:active {color:#ff0000}

In the Save As dialog box, you need to specify a location, name and file type for your document, select the location where you want to save your document, from the combo box, type a name for the document with the .css extension in the file name combo box such as: style.css and then click the save button.